前言

使用github pages服务搭建博客的好处有：

  1. 全是静态文件，访问速度快；
  2. 免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；
  3. 可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；
  4. 数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；
  5. 博客内容可以轻松打包、转移、发布到其它平台；

准备工作

  • 有一个github账号
  • 安装了node.js、npm，并了解相关基础知识；
  • 安装了git for windows（或者其它git客户端）

了解

node作用：用来生成静态页面的 到Node.js官网下载相应平台的最新版本，一路安装即可。
git作用：把本地的hexo内容提交到github上去

在github上搭建github pages

  • 新建一个名为你的用户名.github.io的仓库
  • 之后的博客就存放于此

绑定域名

域名配置最常见有2种方式，CNAME和A记录，CNAME填写域名，A记录填写IP，由于不带www方式只能采用A记录，所以必须先ping一下你的用户名.github.io的IP，然后到你的域名DNS设置页，将A记录指向你ping出来的IP，将CNAME指向你的用户名.github.io，这样可以保证无论是否添加www都可以访问，如下：

配置本机的ssh key(git)

使用hexo写博客

Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具，支持Markdown格式，有众多优秀插件和主题。

官网： http://hexo.io
github: https://github.com/hexojs/hexo

安装

1
$ npm install -g hexo

初始化

在电脑的某个地方新建一个名为hexo的文件夹（名字可以随便取），比如我的是F:\hexo，由于这个文件夹将来就作为你存放代码的地方，所以最好不要随便放。

1
2
$ cd /f/Workspaces/hexo/
$ hexo init

hexo会自动下载一些文件到这个目录，包括node_modules，目录结构如下图：

1
2
$ hexo g || hexo generate # 生成静态页面
$ hexo s || hexo server  # 启动服务本地预览

执行以上命令之后，hexo就会在public文件夹生成相关html文件，这些文件将来都是要提交到github去的：

hexo s是开启本地预览服务，打开浏览器访问 http://localhost:4000

关联github pages

打开博客根目录下的_config.yml文件,在最下方找到并照如下修改:

1
2
3
4
deploy:
  type: git
  repository: https://github.com/StruggleYang/StruggleYang.github.io.git
  branch: master

执行命令，自动使用git部署：

1
npm install hexo-deployer-git --save

部署：

1
hexo deploy

在浏览器输入user_name.github.io,比如：

http://struggleyang.github.io

user_name是对应的github用户名

以后的部署，按照以下三个步骤：

1
2
3
hexo clean  #清理public下的文件,建议使用，有时候不清理页面不生效
hexo generate #生成静态文件
hexo deploy #部署已经生成的静态文件

说个问题

  • 为了保证访问，在绑定域名时对应的CNAME类型记录需要单独建立文件存放在网站根目录，CNAME放在source里面。
  • 在之后的操作中每次更新文章都需要部署，所以有可能将CNAME文件被新版本清除

一些常用hexo命令：

1
2
3
4
5
6
7
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help  #查看帮助
hexo version  #查看Hexo的版本

一些可能用的路径:

文章在 source/_posts，编辑器可以用 Sublime，vscode，atom，有道云笔记，支持 markdown 语法。如果想修改头像可以直接在主题的 _config.yml 文件里面修改，友情链接，之类的都在这里，修改名字在 public/index.html 里修改